<div class="register" *ngIf="true">
    <div class="material-logo">源创艺</div>
    <span class="material-close" [routerLink]="['', {outlets: {auth: null}}]"><i class="iconfont">&#xe611;</i></span>
    <form #registerForm="ngForm" class="material-register-form">
        <div class="am-form-group ml-form-group">
            <input id="username" name="username" class="btm-border" type="text" [(ngModel)]="user.username" pattern="^[A-Za-z]+\w{3,20}" required #username="ngModel" placeholder="账号">
            <div *ngIf=" messages.username" class="alert alert-danger am-text-truncate">
                <i class="iconfont">&#xe603;</i>
                {{messages.username}}
            </div>
        </div>
        <div class="am-form-group ml-form-group">
            <input id="password" name="password" class="btm-border" type="password" [(ngModel)]="user.password" required pattern="(?!^\d+$)(?!^[a-zA-Z]+$).{6,}"
                   #password="ngModel" placeholder="密码">
            <div *ngIf=" messages.password" class="alert alert-danger am-text-truncate">
                <i class="iconfont">&#xe603;</i>
                {{messages.password}}
            </div>
        </div>
        <div class="am-form-group ml-form-group">
            <input  name="confirmPassword" class="btm-border" type="password" required [(ngModel)]="user.confirmPassword" #confirmPassword="ngModel" placeholder="确认密码" [pattern]="'^'+user.password+'$'">
            <div *ngIf=" messages.confirmPassword" class="alert alert-danger am-text-truncate">
                <i class="iconfont">&#xe603;</i>
                {{messages.confirmPassword}}
            </div>
        </div>
        <button (click)="register()" class="am-btn am-material-btn">注&nbsp;&nbsp;&nbsp;册</button>
    </form>
    <div class="materal-remember">
        <div class="am-fr"><a mat-button [routerLink]="['', {outlets: {auth: 'login'}}]">用已有账号登陆</a></div>
    </div>
</div>

